<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <!-- 内容区 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="110px"
    >
      <!-- <el-form-item label="ID" prop="id">
        <el-input v-model="ruleForm.id"></el-input>
      </el-form-item> -->
      <el-form-item label="微信昵称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="会员手机" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="消费金额" prop="pay">
        <el-input v-model="ruleForm.pay"></el-input>
      </el-form-item>
      <el-form-item label="订单数量" prop="num">
        <el-input v-model="ruleForm.num"></el-input>
      </el-form-item>
      <el-form-item label="会员等级" prop="vip">
        <el-input v-model="ruleForm.vip"></el-input>
      </el-form-item>
      <el-form-item label="上次消费时间" required>
        <el-col :span="12">
          <el-form-item prop="lastTime">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="ruleForm.lastTime"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$parent.isShow = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { editFun } from "../../../api/student";
export default {
  props: ["row"], //接收父组件的数据
  data() {
    return {
      dialogVisible: true, //控制弹框显示或者隐藏
      ruleForm: {
        id: "",
        name: "",
        phone: "",
        pay: "",
        num: "",
        vip: "",
        lastTime: "",
      },
      rules: {
        id: [{ required: true, message: "请输入id", trigger: "blur" }],
        name: [{ required: true, message: "请输入微信昵称", trigger: "blur" }],
        phone: [{ required: true, message: "请输入会员手机", trigger: "blur" }],
        pay: [{ required: true, message: "请输入消费金额", trigger: "blur" }],
        num: [{ required: true, message: "请输入订单数量", trigger: "blur" }],
        vip: [{ required: true, message: "请输入会员等级", trigger: "blur" }],
      },
      date1: [
        {
          type: "date",
          required: true,
          message: "请选择日期",
          trigger: "change",
        },
      ],
      date2: [
        {
          type: "date",
          required: true,
          message: "请选择时间",
          trigger: "change",
        },
      ],
    };
  },
  mounted() {
    // this.ruleForm = {...this.row}
    this.ruleForm = Object.assign({}, this.row);
  },
  // computed: {
  //   ruleForm() {
  //     return this.row; //把数据传给ruleFrom
  //   },
  // },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.$parent.isShow = false; //修改父组件的变量
        })
        .catch((_) => {});
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editFun(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.$parent.getData();
              this.$parent.isShow = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style></style>
